import React, { Component } from 'react';
import {
	TouchableOpacity,
	TextInput,
	StyleSheet,
	View,
	Text,
	Dimensions,
} from 'react-native';
import MapView, { Marker ,Callout } from 'react-native-maps';
// import HeatMaps from 'react-native-heat-map';
//https://snack.expo.io
export default class HeatMap extends Component {
	constructor(props) { 
		super(props);
		this.state = {
			region: {
				latitude: 38.79825,
				longitude: -122.4424,
				latitudeDelta: 0.2,
				longitudeDelta: 0.2,
			},
			markers: [
				{
					color: "red",
					Incodent:'Disablity XX22',
					Dis:'Harassment',
					coordinate: {
						"latitude": 38.79545746796351,
						"longitude": -122.44766479988456,
					},
				},
				{
					color: "red",
					Incodent:'Disablity 3434343',
					Dis:'Harassment4343434',
					coordinate: {
						"latitude": 38.73995746796361,
						"longitude": -122.4566479983456,
					},
				},
				{
					color: "red",
					Incodent:'Disablity XX22',
					Dis:'Harassment2',
					coordinate: {
						"latitude": 38.79645746796361,
						"longitude": -122.4566479983456,
					},
				},
			],
		};
	}

	onRegionChange(region) {
		this.setState({ region });
	}

	render() {
		return (
// 			<HeatMaps
//     pointerEvents="box-only"
//     style={{
//       flex: 1,
//     }}
//     data={[
//       [
//         -3.0118499, // longitude
//         53.4139281, // latitude
//         20   // intensity
//       ],
//     ]}
//     region={{
//       longitude: -3.0118499,
//       latitude: 53.4139281,
//       latitudeDelta: 0.2,
//       longitudeDelta: 0.2,
//     }}
//   />
			<MapView style={styles.map} region={this.state.region}>
			{this.state.markers.map((marker, index) => {
				console.log(marker);
				return (
					<Marker
						key={index}
						
						coordinate={marker.coordinate}
						pinColor={marker.color}
						
					>
				<Callout>
			<View>
			  <Text>Rockfeller Center:</Text>
			  <Text>Incodent: {marker.Incodent}</Text>
			  <Text>Details: {marker.Dis}</Text>
			</View>
		  </Callout>
					</Marker>
				);
			})}
		</MapView>
	
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
	map: {
		width: Dimensions.get('window').width,
		height: '70%',
	},
});

// coordinate={{latitude: marker.latitude,
// 	longitude: marker.longitude}}
